{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
<style type="text/css">
	.demeanor-img{margin: 0 -.5rem;}
	.demeanor-img .col-3{padding: .5rem;}
	.steps-item{width:140px;text-align:center;padding:1rem 0;color: #fff;position: relative;border-radius: 4px;}
	.steps-item.active{background-color: #6187ED;}
	.steps-item .steps-number{display: inline-block;width: 40px;height: 40px;line-height: 35px;color: #6187ED;border:solid 2px #6187ED;background-color: #ffffff;border-radius: 50%;text-align: center;position: absolute;bottom:-15px;left: calc(50% - 20px);font-weight: 500;}
	.steps-item.active .steps-number{border-color: #6187ED;color: #6187ED;}
</style>
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_account"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow">
			<div class="flex">
				<div class="flex-1 block-title-before py-2">企业认证</div>
			</div>
			<div class="pt-5" v-if="Find.id&&(Find.status===0||Find.status===1)">
				<div class="text-center" v-if="Find.status===1">
					<h5 class="flex flex-center text-success">
						<div class="flex-1"></div>
						<i class="el-icon-circle-check mr-2 h2 mb-0"></i>
						<div>审核通过</div>
						<div class="flex-1"></div>
					</h5>
					<p class="text-secondary">恭喜您，您提交的实名认证通过审核了！</p>
				</div>
				<div class="text-center" v-else-if="Find.status===0">
					<h5 class="flex flex-center text-primary">
						<div class="flex-1"></div>
						<i class="el-icon-time mr-2 h2 mb-0"></i>
						<div>审核中</div>
						<div class="flex-1"></div>
					</h5>
					<p class="text-secondary">您提交的实名认证正在审核，请耐心等待</p>
				</div>
				<div class="text-center">
					<div class="flex py-3">
						<div class="flex-1"></div>
						<div class="w-150px text-right">企业名称：</div>
						<div class="w-200px text-left">{{Find.name}}</div>
						<div class="flex-1"></div>
					</div>
					<div class="flex py-3">
						<div class="flex-1"></div>
						<div class="w-150px text-right">统一社会信用代码：</div>
						<div class="w-200px text-left">{{Find.id_number}}</div>
						<div class="flex-1"></div>
					</div>
				</div>
			</div>
			<div v-else>
				<div class="bg-FFF0E5 p-3 mt-3 flex">
					<div><i class="el-icon-warning h3 mb-0 text-primary"></i></div>
					<div class="flex-1 pl-2">
						<h6 class="text-primary">小提示</h6>
						<div class="text-secondary">1,可标注水印，但是不能有遮挡</div>
						<div class="text-secondary">2,单个照片建议小于5MB，仅支持JPG、PNG格式</div>
						<div class="text-secondary">3,经办人身份请在辅助材料上传授权函</div>
					</div>
				</div>
				<div class="flex py-3">
					<div class="flex-1">
					<el-form :model="form" @submit.native.prevent="submitForm('form')" :rules="rules" ref="form" label-width="200px" label-position="right">
						<el-form-item label="企业名称" prop="name">
							<el-input v-model="form.name" class="col-12 col-sm-6 pl-0 pr-0 rounded-0"></el-input>
						</el-form-item>
						<el-form-item label="统一社会信用代码" prop="id_number">
							<el-input v-model="form.id_number" class="col-12 col-sm-6 pl-0 pr-0 rounded-0"></el-input>
						</el-form-item>
						<el-form-item label="联系人" prop="contacts">
							<el-input v-model="form.contacts" class="col-12 col-sm-4 pl-0 pr-0 rounded-0"></el-input>
						</el-form-item>
						<el-form-item label="手机号" prop="mobile">
							<el-input v-model="form.mobile" class="col-12 col-sm-4 pl-0 pr-0 rounded-0"></el-input>
						</el-form-item>
						<el-form-item label="地区" prop="area">
						    <el-cascader 
						    	v-model="form.area"
						    	placeholder="试试搜索：北京"
						    	filterable
								:props="defaultProps"
						    	:options="arealist"
						    	class="col-12 col-sm-10 pl-0 pr-0 rounded-0">
						    </el-cascader>
						</el-form-item>
						<el-form-item label="联系地址" prop="address">
							<el-input v-model="form.address" class="col-12 col-sm-10 pl-0 pr-0 rounded-0"></el-input>
						</el-form-item>

						<el-form-item label="企业营业执照" prop="img3"
						v-if="attestation_ms.indexOf('license')!==-1">
							<el-image
							v-if="form.img3" 
							class="w-100px h-100px"
							:src="'{:config('xy_web.imgurl')}'+form.img3" 
							:preview-src-list="['{:config('xy_web.imgurl')}'+form.img3]">
							</el-image>
							<el-upload
							class="avatar-uploader"
							action="/uploadFiles"
							name="file"
							accept="image/jpg,image/jpeg,image/png"
							:data="{path:'real_name/img3'}"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:on-error="handleAvatarError">
								<el-button size="small" type="primary">选择文件</el-button>
							</el-upload>
						</el-form-item>

						<el-form-item label="法人或经办人身份证人像面" prop="img1"
						v-if="attestation_ms.indexOf('id_card_f')!==-1">
							<el-image
							v-if="form.img1" 
							class="w-100px h-100px"
							:src="'{:config('xy_web.imgurl')}'+form.img1" 
							:preview-src-list="['{:config('xy_web.imgurl')}'+form.img1]">
							</el-image>
							<el-upload
							class="avatar-uploader"
							action="/uploadFiles"
							name="file"
							accept="image/jpg,image/jpeg,image/png"
							:data="{path:'real_name/img1'}"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:on-error="handleAvatarError">
							<el-button size="small" type="primary">选择文件</el-button>
							</el-upload>
						</el-form-item>

						<el-form-item label="法人或经办人身份证国徽面" prop="img2"
						v-if="attestation_ms.indexOf('id_card_e')!==-1">
							<el-image
							v-if="form.img2" 
							class="w-100px h-100px"
							:src="'{:config('xy_web.imgurl')}'+form.img2" 
							:preview-src-list="['{:config('xy_web.imgurl')}'+form.img2]">
							</el-image>
							<el-upload
							class="avatar-uploader"
							action="/uploadFiles"
							name="file"
							accept="image/jpg,image/jpeg,image/png"
							:data="{path:'real_name/img2'}"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:on-error="handleAvatarError">
								<el-button size="small" type="primary">选择文件</el-button>
							</el-upload>
						</el-form-item>

						<el-form-item label="承诺函" prop="img5"
						v-if="attestation_ms.indexOf('loc')!==-1">
							<el-image
							v-if="form.img5" 
							class="w-100px h-100px"
							:src="'{:config('xy_web.imgurl')}'+form.img5" 
							:preview-src-list="['{:config('xy_web.imgurl')}'+form.img5]">
							</el-image>
							<el-upload
							class="avatar-uploader"
							action="/uploadFiles"
							name="file"
							accept="image/jpg,image/jpeg,image/png"
							:data="{path:'real_name/img5'}"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:on-error="handleAvatarError">
								<el-button size="small" type="primary">选择文件</el-button>
							</el-upload>
							{notempty name=":config('xy_company.attestation_loc')"}
							<el-link href="{xycms:web name='imgurl'/}{:config('xy_company.attestation_loc')}" type="danger" :underline="false" target="_blank">
								下载承诺函模板
							</el-link>
							{/notempty}
						</el-form-item>

						<el-form-item label="辅助材料" prop="img4"
						v-if="attestation_ms.indexOf('supplement')!==-1">
							<el-image
							v-if="form.img4" 
							class="w-100px h-100px"
							:src="'{:config('xy_web.imgurl')}'+form.img4" 
							:preview-src-list="['{:config('xy_web.imgurl')}'+form.img4]">
							</el-image>
							<el-upload
							class="avatar-uploader"
							action="/uploadFiles"
							name="file"
							accept="image/jpg,image/jpeg,image/png"
							:data="{path:'real_name/img4'}"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:on-error="handleAvatarError">
								<el-button size="small" type="primary">选择文件</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" native-type="submit">立即保存</el-button>
						</el-form-item>
					</el-form>
					</div>
					<div class="w-400px">
						<div v-if="Find.log&&Find.log.length>0">
							<el-divider content-position="left">审核历史</el-divider>
							<div class="py-3 border-bottom mb-3" v-for="(v,index) in Find.log">
								<div class="flex">
									<div class="flex-1" v-if="v.status===0">提交申请</div>
									<div class="flex-1 text-success" v-if="v.status===1">审核通过</div>
									<div class="flex-1 text-danger" v-if="v.status===2">被驳回</div>
									<div class="small text-secondary">{{v.create_time}}</div>
								</div>
								<div class="pt-2" :class="{'text-danger':index===0}">
									<span class="text-primary" v-if="index===0">最新反馈：</span>{{v.msg}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var arealist={xycms:arealist serialize="json"/};
	{notempty name="attestation_ms"}
	var attestation_ms={:json_encode($attestation_ms,JSON_UNESCAPED_UNICODE)};
	{else/}
	var attestation_ms=[];
	{/notempty}
	{notempty name="Company"}
	var Company={:json_encode($Company,JSON_UNESCAPED_UNICODE)};
	{else/}
	var Company={title:''};
	{/notempty}
	{notempty name="CompanyContacts"}
	var CompanyContacts={:json_encode($CompanyContacts,JSON_UNESCAPED_UNICODE)};
	{else/}
	var CompanyContacts={contacts:'',contacts_mobile:'',contacts_area:[],contacts_address:''};
	{/notempty}
	{notempty name="Find"}
	var Find={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	var form={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{else/}
	var Find={id:0};
	var form={
				name:Company.title,
				id_number:'',
				contacts:CompanyContacts.contacts,
				mobile:CompanyContacts.contacts_mobile,
				area:CompanyContacts.contacts_area,
				address:CompanyContacts.contacts_address,
				img1:'',
				img2:'',
				img3:'',
				img4:'',
				img5:'',
			};
	{/notempty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			Find:Find,
			arealist:arealist,
			attestation_ms:attestation_ms,
	        defaultProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data',
	        },
			form:form,
	        rules: {
		        img1: [
		            { required: true, message: '请上传身份证人像面', trigger: 'change' },
		        ],
		        img2: [
		            { required: true, message: '请上传身份证国徽面', trigger: 'change' },
		        ],
		        img3: [
		            { required: true, message: '请上传营业执照', trigger: 'change' },
		        ],
		        img5: [
		            { required: true, message: '请上传承诺函', trigger: 'change' },
		        ],
		        contacts: [
		            { required: true, message: '请输入联系人', trigger: 'blur' },
		        ],
		        mobile: [
		            { required: true, message: '请输入联系人手机号', trigger: 'blur' },
		        ],
		        area: [
		            { required: true, message: '请选择地区', trigger: 'change' },
		        ],
		        address: [
		            { required: true, message: '请输入联系地址', trigger: 'blur' },
		        ],
		        name: [
		            { required: true, message: '名称不能为空', trigger: 'blur' },
		        ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'real_name/img1'){
							this.form.img1=res.data.path;
						}else if(res.data.type == 'real_name/img2'){
							this.form.img2=res.data.path;
						}else if(res.data.type == 'real_name/img3'){
							this.form.img3=res.data.path;
						}else if(res.data.type == 'real_name/img4'){
							this.form.img4=res.data.path;
						}else if(res.data.type == 'real_name/img5'){
							this.form.img5=res.data.path;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				D.log=[];
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					_this.sendPost({
						url:'',
						data:D,
					},function(ret){
						loading.close();
						if (ret) {
							if(ret.code == 0){
								_this.Find=ret.data;
								XYBase.success(ret.msg);
							}else{
								XYBase.msg(ret.msg);
							}
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
		})
	});
</script>
{/block}